<template>
  <div>
    <div id="h">
        <ul id="head">
      <li><router-link to="/homepage"><img src="list/goback.png" alt=""></router-link></li>
      <li>购物车</li>
       <li><img src="list/more.png" alt=""></li>
 </ul>
    </div>
   
 <!-- <div id="section">
   <img src="cart/1.gif" alt="">
<p>购物车空空的哦，去看看心仪的商品吧～</p>
<router-link to="/homepage">去购物</router-link>
 </div> -->

<ul id="cart">
  <li>
    <input type="checkbox">
  </li>
  <li>
    <img src="list/1.webp" alt="">
  </li>
  <li>
    <p>CAUDALIE欧缇丽臻美亮白精华液</p>
    <span>规格：套装A</span>
   <ol>
     <li>
       <p>¥700.00</p>
       </li>
     <li>
       <p>限购5件</p>
       <button>-</button>
       <span>1</span>
       <button>+</button><br>
       <p>编辑</p>
     </li>
   </ol>
    
  </li>
</ul>

  <list/>
    <Bot/>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
#h{
  position: sticky;
top: 0;
z-index: 100;
background-color: white;

}
#head{
background-color: white;
width: 90%;
  height: 0.5rem;
  margin: auto;
  display: flex;
justify-content: space-between;

}
#head li{
  line-height: 0.5rem;
  font-size: 0.16rem;
}
#head li img{
  width:0.3rem;
  height: 0.3rem;
  margin-top: 0.1rem;
}
#section{
  width: 100%;
  height:2.5rem;
  /* background-color: #f2f2f2; */
}
#section p{
 text-align: center;
 margin-bottom: 0.2rem;
 color: gray;
}
#section a{
  display: block;
  width: 0.7rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  background-color: black;
   color: white;
   margin: auto;
}
#section img{
  width: 0.6rem;
  height: 0.6rem;
  display: block;
  margin: auto;
  padding: 0.2rem 0;
}
#cart{
   width: 100%;
  height:2rem;
  padding-left: 0.1rem;
  /* background-color: gray; */
}
#cart li{
float: left;
margin-top: 0.2rem;
}
#cart li:first-child{
  width: 3%;
  position: relative;
}
#cart li input{
  position: absolute;
  top: 0.5rem;
}
#cart li:nth-child(2){
   width: 30%;

}
#cart li:nth-child(3){
   width: 62%;
}
#cart img{
  width: 1.3rem;
  height: 1.2rem;
}
#cart p{
  margin-bottom: 0.1rem;
}
ol{
  width: 90%;
 display: flex;
 justify-content: space-between;
}

ol li:first-child p{
 margin-top: 0.3rem;

}
ol li:last-child{
  text-align: right;
}
ol li:last-child p:last-child{
  color: gray;
}
ol li button{
  width: 0.2rem;
  height: 0.2rem;
  margin-bottom: 0.15rem;
}
ol li span{
  display: inline-block;
  width: 0.15rem;
  text-align: center;
}
#cart span{
  color: gray;
}
</style>